<template>
  <div class="register-list">
    <div class="l">
      <h2 class="page-title">设备登记</h2>

      <!-- todo:搜索表单 -->
      <search-box @search="onSearch"></search-box>
    </div>
    <div class="r" v-loading="loading">
      <div class="t">
        <el-button
          class="el-icon--left el-icon-circle-plus"
          type="text"
          @click="$router.push('/main/register/add')"
          >登记新设备</el-button
        >
        <ul class="status-list">
          <li v-for="d in statusList" :key="d.id">
            {{ d.name }}
            <span class="status-color" :style="{ background: d.color }"></span>
          </li>
        </ul>
      </div>
      <el-table :data="list">
        <el-table-column prop="id" label="设备编号"></el-table-column>
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="status" label="设备状态" width="100">
          <!-- slot-scope 使用子组件中的数据，
            在 Element UI表格的单元格中，如果要手动插值绑定数据，需要使用 slot-scope
            scope是el-table-column 组件送出来的变量
           -->
          <template slot-scope="scope">
            <!-- {{ $store.state.statusList

              scope.row.status }} -->
            <!-- {{ $store.state.statusList.find(i => i.id === scope.row.status).name }} -->
            {{ ($store.getters.statusObj[scope.row.status] || {}).name }}
            <span
              class="status-color"
              :style="{
                background: ($store.getters.statusObj[scope.row.status] || {})
                  .color,
              }"
            ></span>
          </template>
        </el-table-column>

        <el-table-column prop="category" label="设备分类">
          <template slot-scope="scope">
            {{ $store.getters.categoryObj[scope.row.category] }}
          </template>
        </el-table-column>

        <el-table-column prop="number" label="设备数量"></el-table-column>
        <el-table-column prop="price" label="设备单价"></el-table-column>
        <el-table-column prop="time" label="购置时间"></el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button size="mini" @click="detail(scope.row.id)">详情</el-button>
            <!-- 判断是否已经审核，根据不同状态，显示不同的按钮 -->
            <template v-if="scope.row.status === 'STATUS1'">
              <el-button size="mini" type="primary" @click="edit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="primary" @click="check(scope.row.id)"
                v-if="$store.state.role === 'admin'"
              >审核</el-button>
            </template>
            <el-button
              size="mini"
              v-else-if="$store.state.role === 'admin'"
              type="primary"
              @click="approve(scope.row.id)"
              >入库</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="pageNo"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// 辅助函数，可以自动生成计算属性或方法
import { mapState } from 'vuex';
console.log('mapState', mapState)
import SearchBox from "@/components/SearchBox.vue";
export default {
  components: {
    SearchBox,
  },

  data() {
    return {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      loading: true,

      searchForm: {
        id: "",
        name: "",
        status: "",
        category: "",
      },
    };
  },

  created() {
    this.getList();
  },
  computed: {
    // statusList() {
    //   return this.$store.state.statusList;
    // },
    ...mapState(['statusList'])
  },
  methods: {
    onSizeChange(size) {
      console.log("size", size);
      this.pageSize = size;
      this.pageNo = 1;
      this.getList();
    },
    onCurrentChange(page) {
      console.log("page", page);
      this.pageNo = page;
      this.getList();
    },
    getList() {
      this.loading = true;
      const { pageNo, pageSize } = this;
      this.axios
        .post("/pre-list", {
          pageNo: pageNo,
          pageSize: pageSize,

          ...this.searchForm,
        })
        .then((data) => {
          if (!data.code) {
            this.list = data.data.list;
            this.total = data.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onSearch(obj) {
      this.searchForm = obj;
      this.pageNo = 1;
      this.getList();
    },
    // 入库
    approve(id) {
      this.$confirm("您确认要入库通过该条信息吗?", {
        confirmButtonText: "确定入库",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-approve", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "入库成功!",
                });
              }
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消入库",
          });
        });
    },
    // 审核
    check(id) {
      this.$confirm("您确认要审核通过该条信息吗?", {
        confirmButtonText: "确定审核",
        cancelButtonText: "暂不操作",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/pre-check", {
              id,
            })
            .then((data) => {
              if (!data.code) {
                this.$message({
                  type: "success",
                  message: "审核成功!",
                });
              }
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核",
          });
        });
    },

    // 跳转详情页方法
    detail(id) {
      // 子路由/嵌套路由跳转时路径写完整
      this.$router.push(`/main/register/detail/${id}`);
    },
    // 跳转编辑页面方法
    edit(id) {
      this.$router.push(`/main/register/edit/${id}`);
    }
  },
};
</script>


<style lang="sass">
.register-list
  display: flex
  padding: 0 30px
  .l
    flex: 0 0 300px
  .r
    flex: 1
    margin-left: 30px
    .el-button--mini
      padding: 7px
    .status-color
      width: 10px
      height: 10px
      margin-left: 5px
      display: inline-block
    .t
      height: 70px
      display: flex
      justify-content: space-between
      align-items: center
      .el-button--text
        font-size: 20px
        span
          margin-left: 5px
      ul
        display: flex
        li + li
          margin-left: 10px
</style>
